<template>
	<div>
		<div class="rounded-10px border-1px border-#E5E6EB border-solid p-20px w-600px mt-15px">
			<div class="text-18px mb-10px">
				<span class="text-#07B175">买入</span>
				<span class="text-#20232A">USDT</span>
			</div>
			<div class="flex items-center justify-between mb-10px">
				<p class="text-#86909C">法币金额</p>
				<div class="flex items-center">
					<p class="text-#07B175 text-bold">￥100.00</p>
				</div>
			</div>
			<div class="flex items-center justify-between mb-10px">
				<p class="text-#86909C">价格</p>
				<p class="text-#000000 text-bold">￥ 6.96</p>
			</div>
			<div class="flex items-center justify-between mb-20px">
				<p class="text-#86909C">接收数量</p>
				<p class="text-#000000 text-bold">100.00 USDT</p>
			</div>

			<p class="border-1px h-1px bg-#E5E6EB w-600px mb-20px"></p>
			<div class="flex items-center justify-between mb-10px">
				<p class="text-#86909C">创建时间</p>
				<p class="text-#000000 text-bold">2023-04-02 12:00</p>
			</div>
			<div class="flex items-center justify-between mb-10px">
				<p class="text-#86909C">支付方式</p>
				<div class="flex items-center">
					<p class="w-4px h-14px" :style="{ backgroundColor: payMethod.color }"></p>
					<p class="text-14px text-#000000 ml-10px">{{ payMethod.name }}</p>
				</div>
			</div>
		</div>
		<div class="mt-50px">
			<el-button type="primary" color="#114CEE" style="width:200px;height:50px;font-size: 18px;">
				再次下单
			</el-button>
		</div>
		<div class="mt-20px rounded-10px border-1px border-#E5E6EB border-solid p-20px w-600px flex items-center justify-between"
			@click="dialogVisible = true">
			<p class="text-#000000 text-14px">我已付款但订单已取消</p>
			<div>
				<el-icon>
					<ArrowRightBold />
				</el-icon>
			</div>
		</div>
		<el-dialog v-model="dialogVisible" width="500" close-icon="CloseBold">
			<template #title>
				<div class="flex items-center text-18px text-#000000">
					订单被取消但已付款
				</div>
			</template>
			<template #default>
				<div class="text-14px mb-20px">
					<p class="mb-10px">请尝试通过以下解决方案解决：</p>
					<div class="mb-20px">
						<div class="flex items-center mb-10px">
							<p
								class="flex items-center justify-center rounded-50% bg-#DDEEFF text-#114CEE text-16px w-24px h-24px mr-10px">
								1</p>
							<p class="text-18px text-#000000">提供付款证明</p>
						</div>
						<div class="ml-34px">
							提供相关付款的屏幕截图或视频
						</div>
					</div>
					<div class="mb-20px">
						<div class="flex items-center mb-10px">
							<p
								class="flex items-center justify-center rounded-50% bg-#DDEEFF text-#114CEE text-16px w-24px h-24px mr-10px">
								2</p>
							<p class="text-18px text-#000000">
								要求数字货币转账
							</p>
						</div>
						<div class="ml-34px mb-20px">
							点击下方按钮，通过聊天窗口提供欧神 ID，然后要求卖家通过
							市安支付划转您购买的加密货币。
						</div>
						<div class="ml-34px">
							<el-button type="primary" color="#114CEE" style="width:200px;height:50px;font-size: 18px;">
								要求数字货币转账
							</el-button>
						</div>
					</div>
					<div class="mb-20px">
						<div class="flex items-center mb-10px">
							<p
								class="flex items-center justify-center rounded-50% bg-#DDEEFF text-#114CEE text-16px w-24px h-24px mr-10px">
								3</p>
							<p class="text-18px text-#000000">
								重新下单
							</p>
						</div>
						<div class="ml-34px mb-20px">
							如果卖家没有回复，请向其再下一笔新订单，金额应与您支付
							的金额相同。创建订单后，点击“我已付款，通知卖家”
						</div>
						<div class="ml-34px">
							<el-button type="primary" color="#114CEE" style="width:200px;height:50px;font-size: 18px;">
								再下一笔订单
							</el-button>
						</div>
					</div>
					<p class="text-14px text-#86909C">
						<span>如果问题仍未解决，您可以</span>
						<span class="text-#114CEE">联系客服</span>
					</p>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts" setup>
const payMethod = ref<any>({
	color: '#01A9F2',
	name: '支付宝'
});

const dialogVisible = ref<boolean>(false);
</script>
<style lang="scss" scoped></style>
